Sublime Text #32_네이버 이스포츠 페이지 실습 하지만 페이지의 상단, nav메뉴들이 담겨있는 영역은 브라우저 기준으로 상단에 고정되어 있어 스크롤을 내리더라도 항상 그 자리에 고정되어 있는 것이 특징이다. position: fixed;속성을 사용하여 3차원 속성을 부여하고 고정시킨다. 이미 오브젝트의 배치는 끝났지만 left와 top 속성을 사용하여 하번더 위치값을 명시한다. 스크롤을 내리더라도 nav메뉴가 상단 그자리에 고정되어 나타는... 대구 AI스쿨CSS웹 프로그래밍Sublime TexthtmlCSS #11_미디어 쿼리 실습 media query 속성을 사용하여 브라우저 크기 변화에 따라 메뉴의 정렬방식을 변경한다. 모바일 버전의 margin값이 사라지지 않은 것은 가상 선택자의 오타 때문이다. 브라우저 화면이 모바일 버전의 영역으로 줄어들면 로고영역과 메뉴영역이 아래위로 배치되도록 하여 화면이 줄어들어도 메뉴의 가독성이 줄어들지 않는다. position속성과 flex속성을 적절히 사용하여 오브젝트들을 배치할 수... 대구 AI스쿨CSS웹프로그래밍Sublime TexthtmlCSS #19_네이버_쇼핑페이지 실습 강의 : 웹프로그래밍김인권12네이버쇼핑2_210518(2/2) 어제 부터 작업한 네이버 쇼핑페이지 카피작업을 마무리했다. 여러 제품들과 정보들을 확인할 수 있는 메인 구역의 레이아웃은 다소 차제롭게 되어있어 까다롭게 느껴졌다. 오브젝트의 갯수는 물론 배치 방향과 세부적인 디자인 까지 복잡한만큼 신경써야하는 부분이 많았다. 하단의 "50%할인"을 표시하는 오브젝트는 position:relati... 대구AI스쿨CSS웹프로그레밍Sublime TexthtmlCSS #48_네이버 모바일 페이지(2) 광고를 담은 오브젝트들이 채팅창과 같이 배치되는 영역이다. 각각의 오브젝트들이 유사한 디자인을 가지고 있지만 배치된 방향에 따라 디테일한 부분에서 차이가 있다. 좌우로 배치되는 방향에 따라 li태그의 자식태그 또한 재배치한다. 공통된 디자인 작업, 왼쪽에 배치되는 오브젝트, 오른쪽에 배치되는 오브젝트 순으로 디자인작업을 진행한다. 오브젝트가 배치되는 방향에 상관없이 li 태그의 안쪽으로 향하... CSS대구 AI스쿨Sublime TexthtmlCSS #36_네이버 오디오클립 페이지 실습(2) 과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권32 네이버오디오2_210605(2/3) 주제 : html / css 네이버 오디오클립 페이지의 컨텐츠가 담긴 영역을 카피했다. 좌우로 분리되어 있고 컨텐츠의 구조가 유사하여 컨텐츠의 레이아웃 구조를 디자인 하는 속성을 따로 만들어 사용하였다. 각각의 컨텐츠를 구성하는 div태그에 class="audio-section"을 선택자로 ... 대구 AI스쿨CSS웹프로그래밍Sublime TexthtmlCSS #22_네이버 블로그페이지 실습(2) 강의 : 웹프로그래밍김인권18네이버블로그1_210519(2/3) 웹프로그래밍김인권19네이버블로그1_210519(3/3) - 블로그 상세페이지(챌린지 프로그램) 로그인 영역은 네이버 메인 페이지를 작업한 파일 index.html에서 그 틀을 가져왔다. 기존의 작업에서 이렇게 이미지와 텍스트를 배치할때 <i> 혹은 <img> 태그를 사용하고 정렬 시켰지만 이번에는 background-image속... CSS대구 AI스쿨Sublime TexthtmlCSS #39_트위치 페이지 실습(2) 트위치 페이지에서 눈에 띄는 점은 왼쪽 영역이다. 일반적인 트위치의 컨텐츠가 배치되는 영역과 별개로 스크롤이 적용되어 있어 독립적으로 느껴졌고 트위치라는 플렛폼 사이트의 특성에 잘 맞는 영역이라 생각한다. 추천채널 메뉴는 왼쪽 영역의 핵심적인 부분으로, 사용자들이 소모하는 컨텐츠의 연속성을 제공한다. 내가 보는 방송에 흥미가 떨어지거나 종료되더라도 플렛폼을 벗어나지 않을 수 있는 다른 대안 ... 대구 AI스쿨CSS웹프로그래밍Sublime TexthtmlCSS #47_네이버 모바일 페이지 모바일 버전이라기 보다.화면의 크기, 정확히는 브라우저의 크기에 맞춰 변화하는 웹페이지의 여러 형태 중 반응형 웹페이지의 특성에 맞춰 제작하는 실습을 진행했었다. 이전 미디어쿼리 속성을 사용할때도 사용했던 meta태그로 그 당시에는 그저 미디어쿼리를 사용하기 위한 태그로 생각했었는데 아마도 화면/ 브라우저의 사이즈를 인식하게 만들어 주는 기능을 수행하는 것으로 생각된다. 가장 상단의 nav태... 대구 AI스쿨Sublime Text웹프로그래밍CSShtmlCSS Basic Python - Troubleshooting (sublime text에서 python 실행하기) 크게 윈도우 환경에서 python을 동작시키는 방법은 2가지로 나눌 수 있다. AI스쿨 기초AI과정에서 설치했었는데, 장점은 아나콘다(Anaconda)를 설치하면 대부분의 패키지들이 같이 설치되기 때문에 손쉽게 데이터 분석을 시작할 수 있다. 현재 내가 사용중인 sublime text라고 하는 코드 편집기도 IDE의 일종인데 사실 AI스쿨 교육과정중 강사의 추천으로 사용하기 시작하여 잘 쓰고... TROUBLESHOOTINGpythonSublime TextPython was not found; run without arguments to install from the Microsoft Store, or disable this shortcut from Settings > Manage App Execution Aliases.Python was not found; run without arguments to install from the Microsoft Store, or disable this shortcut from Settings > Manage App Execution Aliases. #20_네이버 웹툰페이지 실습 강의 : 웹프로그래밍김인권12네이버웹툰1_210519(1/4) 웹프로그래밍김인권12네이버웹툰2_210519(2/4) 태그의 깊이와 오브젝트의 양이 많은 페이지였다. 태그가 많아지는 만큼 속성을 주는 양 또한 늘어나겠지만 페이지의 레이아웃은 그동안의 실습에서 이미 경험해 보았기에 크게 걱정하지 않았다. 오늘 그나마 조금 까다로운 부분이라면 캐러셀 부분이라고 생각한다. 서로 크기가 다른 오브젝트... 대구 AI스쿨CSS웹프로그레밍Sublime TexthtmlCSS #8 CSS_애니메이션 뿐만 아니라 color속성 등을 함께 적용하여 다채롭게 구성할 수 있다. transform 속성 오브젝트에 부여되는 움직임을 조정할 수 있다. transform: scale(0.5,0.5); == 오브젝트의 크기조절 (비율) transform: skew(-10deg,20deg); == 오브젝트의 3차원 회전 transform: translate(100px,300px); == 오브젝트의 위치값... 대구 AI스쿨웹 프로그래밍CSSanimationSublime TexthtmlCSS
#32_네이버 이스포츠 페이지 실습 하지만 페이지의 상단, nav메뉴들이 담겨있는 영역은 브라우저 기준으로 상단에 고정되어 있어 스크롤을 내리더라도 항상 그 자리에 고정되어 있는 것이 특징이다. position: fixed;속성을 사용하여 3차원 속성을 부여하고 고정시킨다. 이미 오브젝트의 배치는 끝났지만 left와 top 속성을 사용하여 하번더 위치값을 명시한다. 스크롤을 내리더라도 nav메뉴가 상단 그자리에 고정되어 나타는... 대구 AI스쿨CSS웹 프로그래밍Sublime TexthtmlCSS #11_미디어 쿼리 실습 media query 속성을 사용하여 브라우저 크기 변화에 따라 메뉴의 정렬방식을 변경한다. 모바일 버전의 margin값이 사라지지 않은 것은 가상 선택자의 오타 때문이다. 브라우저 화면이 모바일 버전의 영역으로 줄어들면 로고영역과 메뉴영역이 아래위로 배치되도록 하여 화면이 줄어들어도 메뉴의 가독성이 줄어들지 않는다. position속성과 flex속성을 적절히 사용하여 오브젝트들을 배치할 수... 대구 AI스쿨CSS웹프로그래밍Sublime TexthtmlCSS #19_네이버_쇼핑페이지 실습 강의 : 웹프로그래밍김인권12네이버쇼핑2_210518(2/2) 어제 부터 작업한 네이버 쇼핑페이지 카피작업을 마무리했다. 여러 제품들과 정보들을 확인할 수 있는 메인 구역의 레이아웃은 다소 차제롭게 되어있어 까다롭게 느껴졌다. 오브젝트의 갯수는 물론 배치 방향과 세부적인 디자인 까지 복잡한만큼 신경써야하는 부분이 많았다. 하단의 "50%할인"을 표시하는 오브젝트는 position:relati... 대구AI스쿨CSS웹프로그레밍Sublime TexthtmlCSS #48_네이버 모바일 페이지(2) 광고를 담은 오브젝트들이 채팅창과 같이 배치되는 영역이다. 각각의 오브젝트들이 유사한 디자인을 가지고 있지만 배치된 방향에 따라 디테일한 부분에서 차이가 있다. 좌우로 배치되는 방향에 따라 li태그의 자식태그 또한 재배치한다. 공통된 디자인 작업, 왼쪽에 배치되는 오브젝트, 오른쪽에 배치되는 오브젝트 순으로 디자인작업을 진행한다. 오브젝트가 배치되는 방향에 상관없이 li 태그의 안쪽으로 향하... CSS대구 AI스쿨Sublime TexthtmlCSS #36_네이버 오디오클립 페이지 실습(2) 과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권32 네이버오디오2_210605(2/3) 주제 : html / css 네이버 오디오클립 페이지의 컨텐츠가 담긴 영역을 카피했다. 좌우로 분리되어 있고 컨텐츠의 구조가 유사하여 컨텐츠의 레이아웃 구조를 디자인 하는 속성을 따로 만들어 사용하였다. 각각의 컨텐츠를 구성하는 div태그에 class="audio-section"을 선택자로 ... 대구 AI스쿨CSS웹프로그래밍Sublime TexthtmlCSS #22_네이버 블로그페이지 실습(2) 강의 : 웹프로그래밍김인권18네이버블로그1_210519(2/3) 웹프로그래밍김인권19네이버블로그1_210519(3/3) - 블로그 상세페이지(챌린지 프로그램) 로그인 영역은 네이버 메인 페이지를 작업한 파일 index.html에서 그 틀을 가져왔다. 기존의 작업에서 이렇게 이미지와 텍스트를 배치할때 <i> 혹은 <img> 태그를 사용하고 정렬 시켰지만 이번에는 background-image속... CSS대구 AI스쿨Sublime TexthtmlCSS #39_트위치 페이지 실습(2) 트위치 페이지에서 눈에 띄는 점은 왼쪽 영역이다. 일반적인 트위치의 컨텐츠가 배치되는 영역과 별개로 스크롤이 적용되어 있어 독립적으로 느껴졌고 트위치라는 플렛폼 사이트의 특성에 잘 맞는 영역이라 생각한다. 추천채널 메뉴는 왼쪽 영역의 핵심적인 부분으로, 사용자들이 소모하는 컨텐츠의 연속성을 제공한다. 내가 보는 방송에 흥미가 떨어지거나 종료되더라도 플렛폼을 벗어나지 않을 수 있는 다른 대안 ... 대구 AI스쿨CSS웹프로그래밍Sublime TexthtmlCSS #47_네이버 모바일 페이지 모바일 버전이라기 보다.화면의 크기, 정확히는 브라우저의 크기에 맞춰 변화하는 웹페이지의 여러 형태 중 반응형 웹페이지의 특성에 맞춰 제작하는 실습을 진행했었다. 이전 미디어쿼리 속성을 사용할때도 사용했던 meta태그로 그 당시에는 그저 미디어쿼리를 사용하기 위한 태그로 생각했었는데 아마도 화면/ 브라우저의 사이즈를 인식하게 만들어 주는 기능을 수행하는 것으로 생각된다. 가장 상단의 nav태... 대구 AI스쿨Sublime Text웹프로그래밍CSShtmlCSS Basic Python - Troubleshooting (sublime text에서 python 실행하기) 크게 윈도우 환경에서 python을 동작시키는 방법은 2가지로 나눌 수 있다. AI스쿨 기초AI과정에서 설치했었는데, 장점은 아나콘다(Anaconda)를 설치하면 대부분의 패키지들이 같이 설치되기 때문에 손쉽게 데이터 분석을 시작할 수 있다. 현재 내가 사용중인 sublime text라고 하는 코드 편집기도 IDE의 일종인데 사실 AI스쿨 교육과정중 강사의 추천으로 사용하기 시작하여 잘 쓰고... TROUBLESHOOTINGpythonSublime TextPython was not found; run without arguments to install from the Microsoft Store, or disable this shortcut from Settings > Manage App Execution Aliases.Python was not found; run without arguments to install from the Microsoft Store, or disable this shortcut from Settings > Manage App Execution Aliases. #20_네이버 웹툰페이지 실습 강의 : 웹프로그래밍김인권12네이버웹툰1_210519(1/4) 웹프로그래밍김인권12네이버웹툰2_210519(2/4) 태그의 깊이와 오브젝트의 양이 많은 페이지였다. 태그가 많아지는 만큼 속성을 주는 양 또한 늘어나겠지만 페이지의 레이아웃은 그동안의 실습에서 이미 경험해 보았기에 크게 걱정하지 않았다. 오늘 그나마 조금 까다로운 부분이라면 캐러셀 부분이라고 생각한다. 서로 크기가 다른 오브젝트... 대구 AI스쿨CSS웹프로그레밍Sublime TexthtmlCSS #8 CSS_애니메이션 뿐만 아니라 color속성 등을 함께 적용하여 다채롭게 구성할 수 있다. transform 속성 오브젝트에 부여되는 움직임을 조정할 수 있다. transform: scale(0.5,0.5); == 오브젝트의 크기조절 (비율) transform: skew(-10deg,20deg); == 오브젝트의 3차원 회전 transform: translate(100px,300px); == 오브젝트의 위치값... 대구 AI스쿨웹 프로그래밍CSSanimationSublime TexthtmlCSS